<template>
	<view class="smart-page-head">
		<view class="smart-page-head-title">text文本组件</view>
	</view>
	<view class="smart-padding-wrap">
		<view class="text-box" scroll-y="true">
			<text>{{ text }}</text>
		</view>
		<!-- 添加点击事件绑定 -->
		<button type="primary" @click="add" :disabled="!canAdd">add line</button>
		<button type="warn" @click="remove" :disabled="!canRemove">remove line</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				texts: [
					'HBuilder，400万开发者选择的IDE',
					'HBuilderX，轻巧、极速，极客编辑器',
					'uni-app，终极跨平台方案',
					'HBuilder,400万开发者选择的IDE',
					'HBuilderX，轻巧、极速，极客编辑器',
					'uni-app，终极跨平台方案',
					'HBuilder，400万开发者选择的IDE',
					'HBuilderX，轻巧、极速，极客编辑器',
					'uni-app，终极跨平台方案',
					'......'
				],
				text: '',
				canAdd: true,
				canRemove: false,
				extraLine: []
			};
		},
		methods: {
			add: function(e) {
				// 修复索引越界问题，使用texts数组实际长度
				this.extraLine.push(this.texts[this.extraLine.length % this.texts.length]);
				this.text = this.extraLine.join('\n');
				this.canAdd = this.extraLine.length < 12;
				this.canRemove = this.extraLine.length > 0;
			}, 
			remove: function(e) {
				if (this.extraLine.length > 0) {
					this.extraLine.pop();
					this.text = this.extraLine.join('\n');
					this.canAdd = this.extraLine.length < 12;
					this.canRemove = this.extraLine.length > 0;
				} 
			} 
		} 
	} 
</script> 

<style>

</style>